<template>
    <div>

        <!--查询按钮-->
        <div>
            <el-button @click="eventSearch('1')">今天</el-button>
            <el-button @click="eventSearch('2')">本周</el-button>
            <el-button @click="eventSearch('3')">本月</el-button>
            <el-button @click="eventSearch('4')">本季度</el-button>
        </div>

        <!--查询订单状态-->
        <div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="全部" name="-1"></el-tab-pane>
                <el-tab-pane :label="item.key" :name="item.value" v-for="(item, index) in orderStateList" :key="index"></el-tab-pane>
            </el-tabs>
            <div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="orderNo" label="订单号" width="180">
                    </el-table-column>
                    <el-table-column prop="orderAccount" label="订单金额" width="180">
                    </el-table-column>
                    <el-table-column prop="orderStateNameDisplay" label="订单状态">
                    </el-table-column>
                    <el-table-column prop="orderCreatedTimeDisplay" label="下单日期" width="250">
                    </el-table-column>
                    <el-table-column  label="操作按钮">
                        <template slot-scope="scope">
                            <div v-if="scope.row.orderState == 0">
                                <el-button size="mini" type="danger" >立即支付</el-button>
                            </div>
                            <span v-else-if="scope.row.orderState == 1">待发货</span>
                            <span v-else-if="scope.row.orderState == 2">待确认</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'second',
            orderStateList: [],
            tableData: [],
            state:-1,
            searchDate:"5"
        };
    },
    mounted(){
        this.onLoadOrderState()
        this.onLoadOrderData()
    },
    methods: {
        //查询条件（今天、本周。。。。）
        eventSearch(d){
            this.searchDate = d
            this.onLoadOrderData()
        },
        //加载订单状态数据
        onLoadOrderState() { 
            let url= this.$baseUrl +'/order/state'
            this.$http.get(url).then(res=>{
                this.orderStateList = res.data
            })
        },
        //加载订单数据
        onLoadOrderData() {
            //加载已登录的会员的订单数据
            var m = localStorage.getItem('2010a_login_info')
            if (m == null) {
                this.$router.push('/member/login')
            }
            let memberId = JSON.parse(m).id

            let url = this.$baseUrl +'/order/list'
            this.$http.get(url, {
                params: {
                    memberId: memberId,
                    state: this.state,
                    date: this.searchDate
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.data
            })

        },

        handleClick(tab) {
            //console.log(tab, event);
            //console.log(tab.label + '--' + tab.name)
            this.state = tab.name
            this.onLoadOrderData()
        }
    }
};
</script>